<template>
	<BaseContainer>
		<aplid-base-crud ref="crud" class="w-100" v-bind="{ ...baseConfig, ...$attrs }" :operateFormate="onOperateFormate">
			<template v-slot:addDialog="{ row, show }">
				<AuditForm @refresh="handleRefresh" :api="baseConfig.api" v-if="show" :nowRowData="row"></AuditForm>
			</template>
			<template v-slot:editDialog="{ row, show }">
				<AuditForm @refresh="handleRefresh" :api="baseConfig.api" v-if="show" :approvalConfigId="row.randomNo" :nowRowData="row"></AuditForm>
			</template>
		</aplid-base-crud>

		<AplidDialog v-model="visibleForm" width="65%" :rowData="nowRowData">
			<DetailConfig v-if="visibleForm" @refresh="handleRefresh" :showHeader="true" :model="nowRowData"> </DetailConfig>
		</AplidDialog>
	</BaseContainer>
</template>

<script setup lang="ts">
import { baseConfig } from './config'
import AuditForm from './AuditForm/index.vue'
import { useCommonStore } from '@/stores/common'
import AplidDialog from '@/views/instOperate/components/AplidDialog/index.vue'
import DetailConfig from './detail/index.vue'

const { setGloablParams, setTempParams, setMoreSearch } = useCommonStore()
const visibleForm = ref(false)
const nowRowData = ref({})
const crud = ref()
const handleRefresh = () => {
  visibleForm.value = false
	setTempParams({})
	setGloablParams({})
	setMoreSearch({})
	nextTick(() => {
		crud.value.refreshChange({}, false)
	})
}

const onOperateFormate = (data, type) => {
	return new Promise((resolve, reject) => {
		if (type == 'detail') {
			nowRowData.value = data
			visibleForm.value = true
		} else {
			resolve(data)
		}
	})
}
</script>

<style scoped lang="scss">
:deep(.el-dialog) {
	--el-dialog-border-radius: 10px;
	--el-dialog-bg-color: rgba(238, 242, 255, 1);
}
:deep(.el-dialog__header) {
	padding: 0;
	margin: 0;
}
:deep(.el-dialog__body) {
	padding: 0;
}
</style>
